<template>
  <div class="asset-list">
    <section class="common-bar search-bar clear">
      <template>
        <el-radio-group class="fl" v-model="assetStatus" @change="checkStatus">
          <el-radio v-for="(item,index) of statusData" :key="index" :label="index+''">{{item}}</el-radio>
        </el-radio-group>
      </template>
      <el-input placeholder="资产名称、保管人、资产编号" v-model="keyword" class="search-input fr" @keyup.enter.native="searchAsset">
        <el-button slot="append" icon="el-icon-search" @click="searchAsset"></el-button>
      </el-input>
    </section>
    <section class="asset-cards">
      <ul class="clear">
        <li class="asset-li fl" v-for="(item,index) of assetListData" :key="index">
          <router-link :to="{path: '/assetManage/detail', query: {id: item.id}}" :title="item.name">
            <img :src="BASE_URL+item.thumb" alt="资产图片" :onerror="errorImg">
          </router-link>
          <div class="asset-info">
            <p class="asset-name">
              <router-link :to="{path: '/assetManage/detail', query: {id: item.id}}" :title="item.name">{{item.name}}</router-link>
            </p>
            <p class="clear"><span class="asset-tag">{{item.identifier}}</span><span class="refash-time fr">最后更新时间：{{item.update_time}}</span></p>
            <div>
              <span class="status-title">资产状态：</span>
              <p class="status-list clear">
                <template v-for="(item1,index1) of item.spread">
                  <span :class="'status-info '+'status-info'+item1.status" :key="index1">{{statusData[Number(item1.status)]}}（{{item1.number}}）</span>
                </template>
              </p>
            </div>
          </div>
        </li>
      </ul>
      <div class="no-data" v-if="assetListData!=undefined&&assetListData.length==0">- 暂无数据 -</div>
      <div class="pageBox">
        <el-pagination v-if="total_number > page_size" @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
        </el-pagination>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      assetStatus: "0",//资产状态
      // 状态数据：
      statusData: ["全部", "未使用", "使用中", "损坏", "丢失", "报废"],
      keyword: "",//搜索关键字
      errorImg:
        'this.src="' +
        require("../../../assets/images/assetManage/placeholder.png") +
        '"',
      assetListData: [],//资产数据
      // 分页：
      page_index: 1,
      page_size: 6,
      total_number: 0,
    };
  },
  created() {
    this.getAssetList();
  },
  mounted() {
  },
  methods: {
    // 获取资产列表的数据
    getAssetList() {
      let success = data => {
        this.assetListData = data.data.data;
        this.total_number = data.data.data_sum;
        let idData = getOneColumn(data.data.data, 'id');//获取列表中所有的资产的id，用于详情页的切换资产信息功能
        sessionStorage.setItem("idData", JSON.stringify(idData));
      };
      this.$ajax({
        url: "api/property/lists",
        method: "get",
        params: {
          status: this.assetStatus,
          keyword: this.keyword,
          page_index: this.page_index,
          page_size: this.page_size,
        },
        func: {
          success: success
        }
      });
    },
    // 选择搜索不同状态的资产
    checkStatus() {
      this.getAssetList();
    },
    // 搜索框事件
    searchAsset() {
      this.getAssetList();
    },
    // 分页：
    change_page(val) {
      this.page_index = val;
      this.getAssetList();
    }
  }
};
</script>
<style lang="scss">
.search-bar {
  .el-radio-group {
    height: 60px;
    line-height: 70px;
    .el-radio__input {
      display: none;
    }
    .el-radio__label {
      font-size: 14px;
    }
  }
  .search-input {
    box-sizing:border-box;
    width: 300px;
    margin-top:12px;
    .el-input__inner {
      height: 36px;
      line-height: 36px;
      border-radius: 18px;
      padding-right:40px;
    }
    .el-input-group__append, .el-input-group__prepend{
      background-color: transparent;
      border: 1px solid transparent;
      padding:5px;
      right:14px;
      .el-button{
        padding:0;
      }
    }
  }
}
.asset-cards {
  .asset-li {
    display: inline-block;
    width: 590px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    &:nth-child(even) {
      margin-left: 20px;
    }
    img {
      display: inline-block;
      width: 120px;
      height: 120px;
      margin-right: 20px;
    }
    .asset-info {
      display: inline-block;
      width: 404px;
    }
    .asset-name {
      font-size: 16px;
      font-weight: 600;
      line-height: 18px;
      color: #000;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .asset-tag {
      font-size: 14px;
      color: #666;
    }
          .status-list{
          height: 43px;
          overflow: hidden;
      }
    .refash-time,
    .status-title {
      font-size: 12px;
      color: #999;
    }
    .status-title {
      display: block;
      padding: 36px 0 14px;

    }
    .status-info {
        float: left;
      font-size: 12px;
      padding: 3px;
      color: #5e6e65;
      margin: 0 8px 8px 0;
    }
    .status-info1 {
      background-color: #e5f8ff;
    }
    .status-info2 {
      background-color: #d4ffd1;
    }
    .status-info3 {
      background-color: #ebe8f7;
    }
    .status-info4 {
      background-color: #eceef3;
    }
    .status-info5 {
      background-color: #fff0f0;
      margin-right: 0px;
    }
  }
}
.no-data {
  height: 100%;
  line-height: 600px;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  background-color: #fff;
}
</style>

